import Taro, { Component, Config } from '@tarojs/taro'
import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'
import {OSS} from "@/config/config"
import { formatAmount } from '@/utils/utils'
import { getPage } from "@/api/productApi"
import { getMemberPermanent } from "@/api/userApi"
import { GoodsOneList, Loading } from "@/components/index"
import { USER_INFO } from "@/config/storage"
import { toMemberPayPage } from "@/utils/page_router"
import dotImgLeft from '@/assets/icon/dot-img-left.png'
import dotImgRight from '@/assets/icon/dot-img-right.png'

export default class Index extends Component {
  state: any
  props: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '会员+',
    navigationBarTextStyle: 'white',
    navigationBarBackgroundColor: '#2a2a2a'
  }

  constructor () {
    super(...arguments)
    this.state = {
      status: false,
      loading: true,
      userInfo: Taro.getStorageSync(USER_INFO) || {},
      imgHeight: 0,
      dataInfo: {},
      goodsList: []
    }
  }

  //  切换状态
  onSwitchStatus(bool:boolean) {
    this.setState({
      status: bool
    })
  }

  componentWillMount() {
    this.getList()
    this.getGoodsPage()
  }

  //  获取会员资格
  async getList() {
    await getMemberPermanent().then(res => {
      this.setState({
        dataInfo: res.data
      })
    })
  }

  //  加载图片
  onLoadImage(e) {
    const { height } = e.detail
    this.setState({
      imgHeight: height
    })
  }

  //  获取商品信息
  getGoodsPage() {
    getPage({ page: 1, limit: 6 }).then(res => {
      const { list } = res.data
      this.setState({
        loading: false,
        goodsList: list
      })
    })
  }

  render() {
    const { goodsList, imgHeight, loading, status, userInfo, dataInfo } = this.state
    const height = status ? `height: ${190 + 50 + imgHeight}rpx` : ''

    return (<View className='member-page'>
      {loading && <Loading isCover/>}
      <View className='user-info f-g-4'>
        <View className='user-avatar'>
          <Image src={userInfo.headImg}/>
        </View>
        <View className='user-name'>{userInfo.nickName}</View>
      </View>
      <Swiper className='card-list' style={height} nextMargin='30rpx' previousMargin='30rpx'>
        <SwiperItem className='card-item'>
          <View className='basics-info d-f f-d-c j-c-b'>
            <View className='card-top d-f j-c-b'>
              <View>
                <View className='card-title'>{dataInfo.name}</View>
                {/*<View className='card-time'>有效期：{dataInfo.days || 0}天</View>*/}
                <View className='card-time'>{dataInfo.remark}</View>
              </View>
              <View className='card-price bnn-number'>
                <View className='sale-price'><Text className='price-unit'>￥</Text>{formatAmount(dataInfo.amount)}</View>
                <View className='origin-price'>￥{formatAmount(dataInfo.originAmount)}</View>
              </View>
            </View>
            <View className='card-bottom'>欢迎成为会员</View>
          </View>
          <View className={classNames('equity-info', status && 'equity--active')}>
            <View className='equity-head d-f a-i-c j-c-b'>
              <View className='equity-title'>查看会员权益</View>
              <View className='equity-status d-f a-i-c' onClick={this.onSwitchStatus.bind(this, !status)}>
                {status && <View className='status-text'>收起</View>}
                {!status && <View className='status-text'>展开</View>}
                <View className='status-icon bnn-icon'>&#xe661;</View>
              </View>
            </View>
            <View className='equity-body'>
              <Image src={`${OSS}/system/image/member_equity.png`} className='equity-img' onLoad={this.onLoadImage.bind(this)} style={`height: ${imgHeight}rpx`}/>
            </View>
          </View>
        </SwiperItem>
      </Swiper>
      <View className='card-line'/>
      {/*<View className='card-member card-envelope'>*/}
      {/*  <View className='card-head f-g-5'>*/}
      {/*    <Image src='' className='head-icon'/>*/}
      {/*    <Text className='head-title'>会员专属</Text>*/}
      {/*    <Image src='' className='head-icon'/>*/}
      {/*  </View>*/}
      {/*  <View className='card-body'>*/}
      {/*    <CustomOne list={goodsList}/>*/}
      {/*  </View>*/}
      {/*</View>*/}
      <View className='card-member card-exclusive'>
        <View className='card-head f-g-5'>
          <Image src={dotImgLeft} className='head-icon'/>
          <Text className='head-title'>商品推荐</Text>
          <Image src={dotImgRight} className='head-icon'/>
        </View>
        <View className='card-body'>
          <GoodsOneList list={goodsList}/>
        </View>
      </View>
      {!userInfo.isVip && dataInfo.name && <View className='card-menu--height'/>}
      {!userInfo.isVip && dataInfo.name && <View className='card-menu'>
        <View className='btn-buy f-g-5' hoverClass='hover-class--btn' onClick={() => toMemberPayPage()}>立即开通</View>
      </View>}
    </View>)
  }
}
